<template>
    <div class="login-container">
        <el-form :model="loginForm" @submit.native.prevent="handleLogin">
            <el-form-item prop="username">
                <el-input v-model="loginForm.username" placeholder="Username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="loginForm.password" type="password" placeholder="Password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleLogin">Login</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
// import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import axios from '@/api/index.js'

const loginForm = reactive({
    username: 'zhang',
    password: '123456'
});

const handleLogin = () => {
    console.log('Login form submitted:', loginForm);
    // Add your login logic here
    axios.post('/satoken/user/doLogin',loginForm)
};
</script>

<style scoped>
.login-container {
    max-width: 400px;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>